<template>
  <div class=" zy-content pb50">
    <back-level @click="close"/>
    <Card :title="$t('common.Applicationinformation')" class="detail-content-layout mt16">
      <div class="basic-info" style="border: none">
<!--        <div class="basic-info-title">-->
<!--          <h2>{{ $t('common.Applicationinformation') }}</h2>-->
<!--        </div>-->
        <div class="basic-info-body">
          <Table  class="resizable-table" border @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,'Applicationinformation')}" :columns="applyTableColumns"
                 :data="applyTablelist"/>
        </div>
      </div>
    </Card>
    <Card :title="$t('common.InventoryInformation')" class="detail-content-layout mt16">
      <div class="basic-info tableContent" style="border: none">
<!--        <div class="basic-info-title  basic-info-title_bot">-->
<!--          <h2>{{ $t('common.InventoryInformation') }}</h2>-->
<!--        </div>-->
        <div class="basic-info-body">
          <Table class="resizable-table" border @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,'InventoryInformation')}" :columns="sockTableColumns"
                 :data="sockTablelist"/>
        </div>
      </div>

    </Card>
    <Card :title="$t('common.ApprovalInformation')" class="detail-content-layout mt16">
      <div class="basic-info tableContent" style="border: none">
<!--        <div class="basic-info-title  basic-info-title_bot">-->
<!--          <h2>{{ $t('common.ApprovalInformation') }}</h2>-->
<!--        </div>-->
        <div class="basic-info-body">
          <Row>
            <Col span="8" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee">
              <Col :span="24" class="basic-info-body-label"><span>{{ $t('spareParts.ApprovedBy') }}</span>
              </Col>
              <Col :span="24"
                   class="basic-info-body-item">
                                <span>
                                    {{ loginUser.showName }}
                                </span>
              </Col>
            </Col>
            <Col span="8" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee">
              <Col :span="24" class="basic-info-body-label">
                                <span>
                                    {{ $t('equipmentscrapped.Result') }}
                                </span>
              </Col>
              <Col :span="24"
                   class="basic-info-body-item"
                   v-if="$route.query.status !=='check'">
                <RadioGroup v-model="infoList.approvalStatus">
                  <Radio :label="1">{{ $t('spareParts.pass') }}</Radio>
                  <Radio :label="3">{{ $t('spareParts.Fail') }}</Radio>
                  <Radio :label="2">{{ $t('spareParts.turnDown') }}</Radio>
                </RadioGroup>
              </Col>
              <Col :span="24"
                   class="basic-info-body-item"
                   v-else>
                <Tag type="dot"
                     color="success"
                     v-if="infoList.approvalStatus === 1">
                  {{ $t('spareParts.pass') }}
                </Tag>
                <Tag type="dot"
                     color="error"
                     v-if="infoList.approvalStatus === 3">
                  {{ $t('spareParts.Fail') }}
                </Tag>
                <Tag type="dot"
                     color="warning"
                     v-if="infoList.approvalStatus === 2">
                  {{ $t('spareParts.turnDown') }}
                </Tag>
              </Col>
            </Col>
            <Col span="8" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee">
              <!-- 审批意见 -->
              <Col :span="24" class="basic-info-body-label">
                                <span>
                                    {{ $t('equipmentscrapped.Comments') }}
                                </span>
              </Col>
              <Col :span="24"
                   class="basic-info-body-item"
                   v-if="$route.query.status !=='check'">
                <Input v-model="infoList.remark"/>
              </Col>
              <Col :span="24"
                   class="basic-info-body-item"
                   v-else>
                                <span>
                                    {{ infoList.remark }}
                                </span>
              </Col>
            </Col>
          </Row>
          <!--          <Row>-->
          <!--            <Col span="16" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee">-->
          <!--              <Col :span="3" class="basic-info-body-label"><span>审批意见</span></Col>-->
          <!--              <Col :span="21" class="basic-info-body-item"><span>-->
          <!--                <Input v-model="infoList.remark"/>-->
          <!--              </span></Col>-->
          <!--            </Col>-->
          <!--          </Row>-->
        </div>
      </div>
    </Card>
    <Card v-if="(Number(infoList.approvalStatus) === 0 || Number(infoList.approvalStatus) === 1)" :title="$t('common.ExwarehouseInformation')" class="detail-content-layout mt16" >
      <div class="basic-info tableContent" style="border: none">
        <div class="basic-info-title  basic-info-title_bot">
<!--          <h2>{{ $t('common.ExwarehouseInformation') }}</h2>-->
<!--          <div class="add" @click="addtableInfo" v-if="$route.query.status !=='check'">-->
<!--            <span class="addIcon"><Icon type="ios-add-circle-outline"/></span>-->
<!--            <span class="addTitle">{{ $t('common.addExwarehouseInformation') }}</span>-->
<!--          </div>-->
<!--          <Icon type="ios-add-circle-outline" />-->
          <Button type="primary"  class="add" @click="addtableInfo" v-if="$route.query.status !=='check'">
            {{ $t('common.addExwarehouseInformation') }}</Button>
        </div>
        <div class="basic-info-body">
          <Table  class="resizable-table" border @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,'ExwarehouseInformation')}" :columns="tableColumns" height="600" :data="tablelist">
            <template #quantityInStock="{ row,index}">
              <span v-if="row.manageType === 1">1</span>
              <span v-else>
                <Input disabled v-model="tablelist[index].outNum"/>
              </span>
            </template>
            <template #action="{ row }">
              <span class="operationBtn" @click="delRow(row)">{{ $t('common.Delete') }}</span>
            </template>

            <template #materielNo="{ row, index }">
              <Select
                  v-model="tablelist[index].applyDetailId"
                  :disabled="$route.query.status ==='check'"
                  :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="item of applyTablelist"
                        :value="item.id"
                        :label="item.materielNo"
                        :disabled="item.disabled"
                        :key="item.id"/>
              </Select>
            </template>

            <template #backupNo="{ row,index }">
              <Select
                  v-if="$route.query.status !=='check'"
                  @on-change="purchaseOrderNoChange(index)"
                  v-model="tablelist[index].purchaseOrderNo"
                  :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="item of sparePartNoList"
                        :value="item.purchaseOrderNo"
                        :label="item.purchaseOrderNo"
                        :tag="item.id"
                        :key="item.id"/>
              </Select>
              <Input v-else v-model="tablelist[index].purchaseOrderNo"
                     :disabled="$route.query.status ==='check'"/>
            </template>

            <template #warehouseId="{ row }">
              <Select v-model="row.warehouseId"
                      disabled
                      :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="item of warehouserowList"
                        :value="item.id"
                        :label="item.backupName"
                        :key="item.id"/>
              </Select>
            </template>

            <template #shelfConfigId="{ row }">
              <Select v-model="row.shelfConfigId"
                      disabled
                      :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="item of shelvesrowList"
                        :value="item.id"
                        :label="item.shelf"
                        :key="item.id"/>
              </Select>
            </template>

            <template #locationId="{ row }">
              <Select v-model="row.locationId"
                      disabled
                      :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="item of locationrowList"
                        :value="item.id"
                        :label="item.location"
                        :key="item.id"/>
              </Select>
            </template>
          </Table>
        </div>
      </div>
    </Card>

    <bottom-handle-wrap v-if="$route.query.status !=='check'">
      <Button class="mr16" @click.prevent="close">{{ $t('common.Cancle') }}</Button>
      <Button  class="mr16" type="primary" @click.prevent="onsumbit('save')">{{ $t('common.Save') }}</Button>
      <Button type="primary" @click.prevent="onsumbit('add')">{{ $t('common.submit') }}</Button>
    </bottom-handle-wrap>
    </div>
</template>

<script>
import {
    getCompanyList,
    getBackupsByCompany,
    getShelfByBackupId,
    getLocationByShelfId
} from "@/api/index.js";
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
    name: "addScrapApply",
    mixins:[toggleTableOperation],
    data() {
        return {
            sockTableColumns: [
                {
                    title: `${this.$t('spareParts.company')}`,
                    key: 'companyName',
                    align: 'center',
                    resizable: true,tooltip: true,
                    minWidth:120
                },
                {
                    title: `${this.$t('spareParts.Warehouse')}`,
                    key: 'warehouseName',
                    align: 'center',
                    resizable: true,tooltip: true,
                    minWidth:120
                },
                {
                    title: `${this.$t('spareParts.Rack')}`,
                    key: 'shelfConfigName',
                    align: 'center',
                    resizable: true,tooltip: true,
                    minWidth:120
                },
                {
                    title: `${this.$t('spareParts.Location')}`,
                    key: 'locationConfigName',
                    align: 'center',
                    resizable: true,tooltip: true,
                    minWidth:120
                },
                {
                    title: `${this.$t('spareParts.PartNo')}`,
                    key: 'materielNo',
                    align: 'center',
                    resizable: true,tooltip: true,
                    minWidth:120
                },
                {
                    title: `${this.$t('common.SpareNumber')}`,
                    key: 'backupNo',
                    align: 'center',
                    resizable: true,tooltip: true,
                    minWidth:120
                },
                {
                    title: `${this.$t('common.GoodsName')}`,
                    key: 'goodsName',
                    align: 'center',
                    resizable: true,tooltip: true,
                    minWidth:120
                },
                {
                    title: `${this.$t('spareParts.Model')}`,
                    key: 'specification',
                    align: 'center',
                    minWidth:120
                },
                {
                    title: `${this.$t('spareParts.quantity')}`,
                    key: 'quantityInStock',
                    align: 'center',
                    resizable: true,tooltip: true,
                    minWidth:120
                },
                {
                    title: `${this.$t('common.ControlMode')}`,
                    key: 'manageType',
                    align: 'center',
                    resizable: true,tooltip: true,
                    minWidth:120
                }
            ],
            loginUser: {},
            backupNoList: [],
            applyTablelist: [],
            sockTablelist: [],
            applyTableColumns: [
                {
                    title: `${this.$t('spareParts.company')}`,
                    key: 'companyName',
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('spareParts.Warehouse')}`,
                    key: 'warehouseName',
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('spareParts.PartNo')}`,
                    key: 'materielNo',
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('common.GoodsName')}`,
                    key: 'goodsName',
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('spareParts.Specification')}`,
                    key: 'specification',
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('spareParts.quantity')}`,
                    key: 'applyNum',
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('common.ControlMode')}`,
                    key: 'manageType',
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('spareParts.UserReson')}`,
                    key: 'remark',
                    align: 'center',
                    resizable: true
                }
            ],
            showTable: false,
            idNum: 0,
            tablelist: [],
            OAList: [],
            tableColumns: [
                {
                    title: `${this.$t('spareParts.PartNo')}`,
                    key: 'materielNo',
                    slot: "materielNo",
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('common.SpareNumber')}`,
                    key: 'backupNo',
                    slot: "backupNo",
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('spareParts.Warehouse')}`,
                    key: 'warehouseId',
                    slot: "warehouseId",
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('spareParts.Rack')}`,
                    key: 'shelfConfigId',
                    slot: "shelfConfigId",
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('spareParts.Location')}`,
                    key: 'locationId',
                    slot: "locationId",
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('spareParts.quantity')}`,
                    key: 'quantityInStock',
                    slot: "quantityInStock",
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: "action",
                    fixed: 'right',
                    minWidth: 50,
                    align: "center"
                }
            ],
            infoList: {},
             sparePartNoList:[],
            warehouserowList:[],
          shelvesrowList:[],
          locationrowList:[]
            // manageType:[
            //   {type:1,value:'单个管理'},
            //   {label:2,value:'单个管理'},
            // ]
        }
    },
    created() {

        this.getColumnWidth(this.applyTableColumns,'Applicationinformation')
        this.getColumnWidth(this.sockTableColumns,'InventoryInformation')
        this.getColumnWidth(this.tableColumns,'ExwarehouseInformation')


        this.getInfolist()
        if (this.$route.query.status === 'check') {
            this.tableColumns = this.tableColumns.splice(0, this.tableColumns.length - 1)
        }
    },
    methods: {
        getApplicationOAList(query) {
            if (query) {
                this.axios({
                    method: 'get',
                    url: '/basic/user/searchOAUser',
                    params: {
                        key: query
                    }
                }).then(res => {
                    if (res.code === 200) {
                        this.OAList = res.data.map(item => {
                            return {
                                ...item,
                                showName: item.empno + '----' + item.username
                            }
                        })
                        let loginUser = this.OAList.find(val => val.id === this.infoList.approvalBy);
                        this.loginUser = loginUser;
                    } else {
                        this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                    }
                })
            } else {
                this.OAList = []
            }
        },
        locationChange(row) {
            let location;
            const obj = row.locationrowList.find(val => val.id === row.locationId)
            if (obj) {
                location = obj.location
            }
            // const location = row.locationrowList.find(val=>val.id === row.locationId).location
            this.tablelist.forEach(val => {
                if (val.id === row.id) {
                    val.locationId = row.locationId
                    if (row.outNum) {
                        val.outNum = Number(row.outNum)
                    }
                    this.$set(val, 'location', location)
                }
            })
        },
        //料号切换
        materielNoChange(event, row) {
            const objList = this.applyTablelist.find(val => val.id === event)

            objList.disabled = true;
            this.tablelist.forEach(item => {
                if (item.applyDetailId === event) {
                    item.warehouseId = objList.warehouseId
                    item.warehouseName = objList.warehouseName
                    item.materielNo = objList.materielNo

                    // this.getBackupsByCompany(7, item)
                    // this.getBackno(item.materielNo, item)
                }
            })
        },
        addtableInfo() {
            if (this.tablelist.length === this.applyTablelist.length) {
                this.$Message.warning(this.$t('common.DataLimit'));
                return;
            }

            this.idNum++;
            const obj = {
                id: this.idNum,
                //materielNoList: this.applyTablelist
            }
            // console.log(obj);
            this.tablelist.push(obj);
        },
        getBackno(materielNo, row) {
            return this.axios({
                method: 'get',
                url: '/dms/applyUse/querySearch',
                params: {materielNo}
            }).then(res => {
                if (res.code === 200) {
                    this.backupNoList = res.data;
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        //公司查仓库
        getBackupsByCompany(companyId, row) {
            if (!companyId) {
                return;
            }
            let params = {
                companyId
            }
            return getBackupsByCompany(params).then(async res => {
                if (res.code === 200) {
                    if (row) {
                        this.$set(row, 'warehouserowList', res.data)
                        await this.warehouseChange(1, row)
                    }
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        //仓库查货架
        warehouseChange(delIds, row) {
          console.log(row)
            if (!delIds) {
                return;
            }
            let warehouseName;
            const obj = row.warehouserowList.find(val => val.id === row.warehouseId)
            if (obj) {
                warehouseName = obj.backupName
            }
            // const warehouseName = row.warehouserowList.find(val=>val.id === row.warehouseId).backupName
            let params = {
                delIds: [delIds],
                materielNo: row.materielNo
            }
            if (row) {
                params.delIds = [row.warehouseId]
            }
            return getShelfByBackupId(params).then(async res => {
                if (res.code === 200) {
                    if (row) {
                        this.tablelist.forEach(val => {
                            if (val.id === row.id) {
                                this.$set(val, 'warehouseName', warehouseName)
                                this.$set(val, 'shelvesrowList', res.data)
                            }
                        })
                        if (row.shelfConfigId) {
                            await this.shelvesChange(1, row)
                        }
                    }
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        shelvesChange(delIds, row) {
            if (!delIds) {
                return;
            }
            // const shelf = row.shelvesrowList.find(val=>val.id === row.shelfConfigId).shelf
            let shelf;
            const obj = row.shelvesrowList.find(val => val.id === row.shelfConfigId)
            if (obj) {
                shelf = obj.shelf
            }
            let params = {
                delIds: [delIds],
                materielNo: row.materielNo
            }
            if (row) {
                params.delIds = [row.shelfConfigId]
            }
            return getLocationByShelfId(params).then(res => {
                if (res.code === 200) {
                    if (row) {
                        this.tablelist.forEach(val => {
                            if (val.id === row.id) {
                                this.$set(val, 'shelfConfigId', row.shelfConfigId)
                                this.$set(val, 'locationrowList', res.data)
                                this.$set(val, 'shelf', shelf)
                            }
                        })
                    }
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        onsumbit(str) {
          let tableList = JSON.parse(JSON.stringify(this.tablelist));
          tableList = tableList.map(item=>{
            if (item.locationConfigName)
              item.location = item.locationConfigName;
            if (item.locationConfigId)
              item.locationId = item.locationConfigId
            if (item.shelfConfigName)
              item.shelf = item.shelfConfigName;
            if (item.manageTypeNum)
              item.manageType = item.manageTypeNum
            return item;
          })
          if (!this.infoList.approvalStatus){
            this.$Message.warning(({content:'请选择审批结果！',duration:6,closable:true}))
            return;
          }

          if(this.infoList.approvalStatus == 1){
            if (!this.infoList.approvalStatus) {
              this.$Message.warning(this.$t('warn.ApprovalResultEmpty'));
              return
            }
            if (!tableList || tableList.length === 0) {
              this.$Message.warning(this.$t('warn.ExWarehouseInformationEmpty'));
              return;
            }

            let checkFlag = true;


            tableList.forEach(item => {

              if (!item.materielNo || item.materielNo === '') {
                this.$Message.warning(this.$t('warn.MaterielNoEmpty'));
                checkFlag = false;
                return;
              }
              if (!item.purchaseOrderNo || item.purchaseOrderNo === '') {
                this.$Message.warning(this.$t('warn.PurchaseOrderNoEmpty'));
                checkFlag = false;
                return;
              }
              if (!item.shelf || item.shelf === '') {
                this.$Message.warning(this.$t('warn.ShelvesEmpty'));
                checkFlag = false;
                return;
              }

              if (!item.location || item.location === '') {
                this.$Message.warning(this.$t('warn.LocationEmpty'));
                checkFlag = false;
                return;
              }
              if (!item.outNum || item.outNum === '') {
                this.$Message.warning(this.$t('warn.QuantityEmpty'));
                checkFlag = false;
                return;
              }
            })
            if (!checkFlag) {
              return;
            }
          }


            const data = {
                id: this.$route.query.id,
                remark: this.infoList.remark,
                approvalBy: this.infoList.approvalBy,
                approvalStatus: this.infoList.approvalStatus,
                outInfos: tableList
            }
            if (str === 'save') {
                data.submit = 0
            }
            if (str === 'add') {
                data.submit = 1
            }

            this.axios({
                method: 'post',
                url: '/dms/applyUse/approval',
                data
            }).then(res => {
                if (res.code == 200) {
                    this.close()
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        delRow(row) {
            const objList = this.applyTablelist.find(val => val.id === row.applyDetailId);
            if (objList) {
                objList.disabled = false;
            }

            this.tablelist = this.tablelist.filter(val => val.id !== row.id)
        },
        close() {
            this.$router.go(-1)
        },
        getInfolist() {
            let params = {
                id: this.$route.query.id
            }
            this.axios({
                method: 'get',
                url: '/dms/applyUse/query',
                params: params
            }).then(res => {
                if (res.code === 200) {
                    this.infoList = res.data

                    this.infoList.approvalBy = Number(localStorage.getItem('ziyunFactoryUserId'))
                    if (this.$route.query.status === 'check') {
                        this.infoList.approvalBy = Number(this.infoList.approvalBy)
                    } else {
                        this.infoList.approvalBy = Number(localStorage.getItem('ziyunFactoryUserId'))
                    }
                    if (this.infoList.approvalBy) {
                        this.getApplicationOAList(localStorage.getItem('ziyunFactoryPortalName'))
                    }

                    if (res.data.details && res.data.details.length) {
                        this.applyTablelist = res.data.details

                        this.applyTablelist.forEach(val => {
                          val.manageTypeNum = val.manageTypeNUm
                            if (val.manageType) {
                                switch (val.manageType) {
                                    case 1:
                                        val.manageType = '单个管理'
                                        break;
                                    case 2:
                                        val.manageType = '批量管理'
                                        break;
                                }
                            }
                        })
                    }
                    if (res.data.stockInfos && res.data.stockInfos.length) {
                        this.sockTablelist = res.data.stockInfos
                        this.getDataList(res.data.stockInfos)
                        this.sockTablelist.forEach(val => {
                          val.manageTypeNum = val.manageTypeNUm
                            if (val.manageType) {
                                switch (val.manageType) {
                                    case 1:
                                        val.manageType = '单个管理'
                                        break;
                                    case 2:
                                        val.manageType = '批量管理'
                                        break;
                                }
                            }
                        })
                    }
                    if (res.data.outInfos && res.data.outInfos.length) {
                        this.tablelist = res.data.outInfos
                        this.tablelist.forEach(async val => {
                            //val.materielNoList = res.data.details
                            const objList = this.applyTablelist.find(item => item.id === val.applyDetailId);
                            if (objList) {
                                objList.disabled = true;
                            }

                            if (val.materielNo) {
                                // await this.getBackno(val.materielNo, val)
                                // await this.getBackupsByCompany(val.companyId, val)
                            }
                        })
                    }
                    if (this.$route.query.status ==='check' ||  this.tablelist.length > 0){
                      return;
                    }


                  let applyTablelist = JSON.parse(JSON.stringify(this.applyTablelist))
                  let sockTablelist = JSON.parse(JSON.stringify(this.sockTablelist))

                  let list = []
                  for (let i=0;i<applyTablelist.length;i++){
                     let applyNum = applyTablelist[i].applyNum;
                     for (let j=0;j<sockTablelist.length;j++){
                       !(function (j){
                         let sockTablelistItem = JSON.parse(JSON.stringify(sockTablelist[j]))

                         if (applyNum <=0) {
                           return;
                         }
                         //
                         if ((applyNum > 0 && (sockTablelistItem.PartNo === applyTablelist[i].PartNo && applyTablelist[i].warehouseId === sockTablelistItem.warehouseId)) && !sockTablelist[j].isUse){

                           if (applyNum - sockTablelistItem.quantityInStock < 0){
                             sockTablelistItem.quantityInStock =  applyNum
                           }

                           applyNum = applyNum - sockTablelistItem.quantityInStock;
                           sockTablelistItem.outNum = sockTablelistItem.quantityInStock
                           sockTablelistItem.applyDetailId = applyTablelist[i].id
                           sockTablelistItem.purchaseOrderNo = sockTablelistItem.backupNo
                           sockTablelistItem.locationId = sockTablelistItem.locationConfigId
                           sockTablelistItem.location = sockTablelistItem.locationConfigName;
                           sockTablelistItem.shelf = sockTablelistItem.shelfConfigName;
                           sockTablelistItem.manageType = sockTablelistItem.manageTypeNum
                           sockTablelist[j].isUse = true
                           list.push(sockTablelistItem)

                         }
                       })(j)
                     }
                  }

                  this.tablelist  = list;
                  this.getBackno(list[0].materielNo)

                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
      getDataList(list){
        let sparePartNoList = [];
        let warehouserowList = [];
        let shelvesrowList = []
        let locationrowList =[]
        let _list = JSON.parse(JSON.stringify(list))
        for (let i=0;i<_list.length;i++){
          if(!sparePartNoList.find(item=> item.purchaseOrderNo === _list[i].backupNo) || sparePartNoList.length < 1){
            _list[i].purchaseOrderNo = _list[i].backupNo;
            sparePartNoList.push(_list[i])
          }
          if(!warehouserowList.find(item=> item.id === _list[i].warehouseId) || warehouserowList.length < 1){
            warehouserowList.push({
              backupName:_list[i].warehouseName,
              id:_list[i].warehouseId
            })
          }
          if(!shelvesrowList.find(item=> item.id === _list[i].shelfConfigId) || shelvesrowList.length < 1){


            shelvesrowList.push({
              id:_list[i].shelfConfigId,
              shelf:_list[i].shelfConfigName
            })
          }
          if(!locationrowList.find(item=> item.id === _list[i].locationConfigId) || locationrowList.length < 1){
            locationrowList.push({
              id:_list[i].locationConfigId,
              location:_list[i].locationConfigName
            })
          }
        }
        this.locationrowList = locationrowList
        this.warehouserowList = warehouserowList
        this.shelvesrowList = shelvesrowList
        this.sparePartNoList = sparePartNoList
      },
      purchaseOrderNoChange(index){
        let indexObj = this.tablelist[index]
        const obj = this.sockTablelist.find(item=> item.backupNo ===  indexObj.purchaseOrderNo);
        indexObj.warehouseId = obj.warehouseId
        indexObj.shelfConfigId = obj.shelfConfigId
        indexObj.locationId = obj.locationConfigId
        indexObj.outNum = 0
        let outNums = 0;
        let outNum = 0;
        let applyNum = 0
        this.tablelist.forEach(item=>{
          if (indexObj.PartNo === item.PartNo){
            outNums = (item.outNum || 0) + outNums
          }
        })
      this.applyTablelist.forEach(item=> {
          if (item.PartNo === indexObj.PartNo){
            applyNum = item.applyNum + applyNum
          }
        })
        outNum = applyNum - outNums;
        outNum = outNum < 0  ? 0:outNum
        indexObj.outNum = outNum

        // debugger

        this.tablelist.splice(index,1, JSON.parse(JSON.stringify(indexObj)))
        this.$forceUpdate()
      },
        empty(val) {
            return val && val !== '';
        }
    }
}
</script>

<style scoped lang="scss">
/deep/ .ivu-radio-inner{
  border: 1px solid #dcdee2 !important;
}
/deep/ .ivu-input{
  border: 1px solid #dcdee2 !important;
}
.tableContent {
    // margin-top: 6px;
    .operationBtn {
        color: #3271f0;
        cursor: pointer;
        margin: 0 10px;
    }
}

.picking {
    //height: 95%;
    position: relative;
    //height: 82vh;
    //overflow-y: scroll;
    .btnList {
        //position: fixed;
        //bottom: 20px;
        //left: 46%;
        display: flex;
        justify-content: center;
        align-items: center;

        .ivu-btn {
            margin: 0 5px;
        }
    }
}

.ivu-card-body {
    padding: 0;
}

.basic-info {
    //padding: 5px 16px;
    border-bottom: 1px solid #e8eaec;

    .basic-info-body {
        color: #333;
        font-size: 13px;
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        margin: 10px;

        .basic-info-body-label {
            width: 100%;
            height: 48px;
            line-height: 48px;
            background: #f5f6f7;
            text-align: left;
            padding-left: 10px;
            border-left: 1px solid #eee;
        }

        .basic-info-body-item {
            height: 48px;
            line-height: 48px;
            text-align: left;
            padding: 0 10px;
            border-left: 1px solid #eee;
            // border-right: 1px solid #eee;
        }
    }

    .basic-info-title_bot {
        margin-top: 16px;
    }

    .basic-info-title {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .add {
            cursor: pointer;
            display: flex;
            align-items: center;
            padding: 0 10px;

            .addIcon {
                font-size: 28px;
            }

            .addTitle {
                font-size: 16px;
            }
        }

        h2 {
            display: inline-block;
            font-size: 16px;
            padding-left: 10px;
            position: relative;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 7px;
                height: 24px;
                background: #187bdb;
            }
        }
    }

    .search-form {
        padding: 0;

        .ivu-form-item {
            margin: 0;
        }
    }
}
</style>
